<template>
  <div class="search-list">
        <div class="headers">
            <Header></Header>
            <ul>
                <li v-for="(item,index) in searchList.data" :key="index" @click="changeTab(index)">
                    <!--currentIndex的默认值为0  判断其currentIndex也就是选中哪一个栏目的索引 等于 栏目的索引  -->
                    <div :class="searchList.currentIndex ==index ?'active' : ''">{{item.name}}</div>
                    <!--判断是否为 综合栏目 只有综合栏目的index值为0 -->
                    <div class="search-filter" v-if="index !=0">
                        <i class="iconfont"  :class="item.status==1 ? 'active' :''">&#xe606;</i>
                        <i class="iconfont"  :class="item.status==2 ? 'active' :''">&#xeb6d;</i>
                    </div>
                </li>
              
            </ul>
        </div>
        <section>
            <ul v-if="goodsList.length">
                <!-- 查询的结果列表 -->
                <li v-for="(item,index) in goodsList" :key="index" @click="goDetail(item.id)">
                    <img v-lazy="item.imgUrl" alt="">
                    <h3>{{item.content}}</h3>
                    <div class="price">
                        <div >
                            <span>￥</span>
                            <b>{{item.price}}</b>
                        </div>
                        <div>立即购买</div>
                    </div>
                </li> 
            </ul>
            <ul v-else>
                <h5>暂无数据，猜你喜欢</h5>
                <li v-for="(item,index) in hotList" :key="index">
                    <img v-lazy="item.imgUrl" alt="">
                    <h3>{{item.content}}</h3>
                    <div class="price">
                        <div >
                            <span>￥</span>
                            <b>{{item.price}}</b>
                        </div>
                        <div>立即购买</div>
                    </div>
                </li> 
            </ul>
        </section>
        <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from '@/components/search/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'

//引入axios的二次封装
import http from '@/common/api/request.js'



export default {
    name:'Search-list',
    components:{
        Header,
        Tabbar
    },
    data(){
        return{
            goodsList:[],
            searchList:{
                //选中的栏目 默认为综合
                currentIndex:0,
                data:[
                    // status:0 都不亮
                    // status：1 上箭头亮
                    // status：2 下箭头亮
                    {name:'综合',key:'id'},
                    {name:'价格',status:0,key:'price'},
                    {name:'销量',status:0,key:'num'},
                ]
            },
            hotList:[]
        }
    },
    computed:{
        //判断对象升降序的方法
        orderBy(){
            //声明选中的是哪一个对象
            let obj =this.searchList.data[this.searchList.currentIndex]
            //选中的对象进行判断是升序还是降序
            let val = obj.status =='1' ?'asc' :'desc'
            return{
                //返回 对象的名称:升序/降序
                [obj.key]:val
            }
        }
    },
    created(){
        this.getData();
        this.getHotData()
    },
    methods:{
        getData(){
            http.$axios({
                url:'/api/goods/shopList',
                params:{
                    // 拿到url上的key的值 并且可以传递给后端
                    searchName: this.$route.query.key,
                    ...this.orderBy
                }
            }).then(res =>{
                
                this.goodsList =res

            })
        },
        //切换其他栏目时执行的方法
        changeTab(i){
            //让选中的栏目的i 为此时搜索列表的currentIndex
            this.searchList.currentIndex = i
            //使用es6新语法 遍历数组 让不等于选中index的数组的status全为0
            this.searchList.data.forEach((item,index)=>{
                if(index!=i){
                    item.status = 0
                }
            })
            //点击改变状态 如果点击值为1 则点击后让他为2 如果点击当前状态不为1的话让他为1
            this.searchList.data[i].status = this.searchList.data[i].status==1 ? 2 : 1
            //发送请求进行数据排序
            if(this.goodsList.length>0){
                this.getData()
            }else{
                this.getHotData()
            }
        },
        //获取火爆推荐的列表
        getHotData(){
            http.$axios({
                url:'/api/goods/hotList',
                params:{
                    ...this.orderBy
                }
            }).then(res =>{
                this.hotList = res
                
            })
            
        },
        //点击商品跳转至商品详情
        goDetail(id){
            this.$router.push({
                path:'/detail',
                query:{
                    id
                }
            })

        }
    },
    watch:{
        //使用一个监听事件 监听路由（也就是url的key改变） 不然进入页面后在搜索不会执行getData的方法
        $route(){
            this.getData()
        }
    }
    
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
//给背景加背景颜色 自适应
.search-list::before{
	content: ' ';
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #f5f5f5;
	background-size: 100% auto;
}
.search-list{
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: #f5f5f5;
    .headers{
         margin-top: (40 / @rootsize);
         ul{
            display: flex;
            justify-content: space-around;
            margin-top: (10 / @rootsize);
            padding: ( 10 / @rootsize) 0;
            font-size: (16 / @rootsize);
            background-color: #fff;
            border-radius: 13px;
         }
         li{
            display: flex;
            justify-content: space-between;
            align-items:center;
            div{
                padding: 0 (3 / @rootsize);
            }
            .search-filter{
                display: flex;
                flex-direction: column;
                align-items: center;
                i{
                    font-size: (12 / @rootsize);
                    font-weight: 300;
                }
            }
         }
    }
    section{
        margin-top: (10 / @rootsize);
        margin-bottom:1.8rem;
        background-color: #fff;
        border-radius:15px ;
        padding:(10 / @rootsize) 0 ;
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            h5{
                padding: (10 / @rootsize);
                width: 100%;
                font-weight: 400;
            }
            li{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                padding: (10 / @rootsize);
                box-sizing: border-box;
                width: 50%;
                img{
                    width: (170 / @rootsize);
                    height: (170 / @rootsize);
                }
                img[lazy=loading]{
                    background-color: grey  ;
                }
                h3{
                  width: (170 / @rootsize);
                  font-size: (14 / @rootsize); 
                  font-weight: 400;
                  color: #222;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .price{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: (10 / @rootsize) 0; 
                    width: 100%;
                    font-size: (14 / @rootsize);
                    height: (45 / @rootsize);
                    div:last-child{
                        padding: (3 / @rootsize) (6 / @rootsize);
                        color: #fff;
                        background-color: #b0352f;
                        border-radius: 6px;
                        

                    }
                    div:first-child{
                        line-height: (45 / @rootsize);
                        span{
                           
                            font-size: (12 / @rootsize);
                            color: #b0352f;
                        }
                        b{
                           
                            font-size: (16 / @rootsize);
                            color: #b0352f;
                        }
                    }
                }
            }
        }
    }
}
.active{
    color: #b0352f;
}



</style>